<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <!-- 1.静态传参 - 路径传参 -->
      <!--    <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link> -->
      <!-- 2.动态传参 -->
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data() {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch() {
      /* //一、通过路径方式跳转
      //1.简写(this.$router.push('路由路径'))
      this.$router.push('/search') 
      传参数：this.$router.push（‘路由路径?参数名=参数值'）
      this.$router.push(`/search?key=${this.inpValue}`)
      用$router.query.参数名解析
      */
      /* 动态路由传参:
      this.$router.push(`/search/${this.inpValue}`) 
      用$router.params.参数名解析
      */

      /*      2.完整写法 -- 更适合传参
      this.$router.push({
                   path:'路由路径',
                   query:{
                   参数名:参数值,
                   参数名:参数值
                  }
                }) 
     
      this.$router.push({
        path: '/search',
        query: {
          key: this.inpValue
        }
      })
       用$router.query.参数名解析
       */
      /*       动态路由传参
            this.$router.push({
              path: '/search/${this.inpValue}',
            }) 
             用$router.params.参数名解析
             */
      // 二、通过命名路由的方式跳转（需要给路由起名字）适合长路径
      // this.$router.push({name:'路由名字'})  // 路由名字：在路由配置中给路由起名字
      /*      this.$router.push({
             name: 'search',
             // 传参：
             query传参 -- 用$router.query.参数名解析
             param传参 -- 用$router.params.参数名解析
             query:{参数名:参数值}，
             params:{参数名:参数值}
           }) */
    }
  },
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>